<template>
  <div class="box">
    <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft" />
    <van-skeleton title avatar :row="3" :loading="loading1">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="item in list"
            :key="item.id"
            :price="item.price"
            :title="item.title"
          >
            <template #thumb>
              <div class="cart">
                <van-checkbox v-model="item.checked"></van-checkbox>
                <van-image width="80" height="80" lazy-load :src="item.img" />
              </div>
            </template>
            <template #num>
              <van-stepper v-model="item.num" />
            </template>
          </van-card>
        </van-list>
      </van-pull-refresh>
      <van-submit-bar
        :price="zongjia * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allchecked">全选</van-checkbox>
      </van-submit-bar>
    </van-skeleton>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-circle-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup>
//导航栏
const onClickLeft = () => history.back();
//tabbar
import { computed, ref, onMounted } from "vue";
const active = ref(2);

//步进器
const value = ref(1);

//获取数据
import axios from "axios";

//下拉刷新
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    axios.get("/getcartlist").then((resp) => {
      //   console.log(123, resp);
      list.value = list.value.concat(resp.data.list);
    });
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

//全选反选
const allchecked = computed({
  get() {
    return list.value.every((item) => item.checked);
  },
  set(val) {
    list.value.forEach((item) => (item.checked = val));
  },
});

//总价
const zongjia = computed(() => {
  let zongjia = 0;
  let xuanzhong = list.value.filter((item) => item.checked);
  xuanzhong.forEach((item) => {
    zongjia += item.price * item.num;
  });
  return zongjia;
});

const loading1 = ref(true);

onMounted(() => {
  setTimeout(() => {
    loading1.value = false;
  }, 1000);
});
</script>

<style lang='scss' scoped>
.box {
  margin-bottom: 150px;
  .cart {
    display: flex;
    justify-content: space-around;
    width: 130px;
  }
  :deep(.van-card__content) {
    margin-left: 40px;
  }
  .van-submit-bar {
    margin-bottom: 50px;
  }
}
</style>